<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>聊天室</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="./js/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="./css/chat.css" />
  </head>
  <body>
    <div class="box">
      <div class="left">
        <div class="user">
          <img id="avatar" src="" alt="" style="width: 30px; height: 30px" />
          <div id="name"></div>
          <div class="loginout">退出</div>
        </div>
        <div class="userlist">在线用户(5)</div>
        <div class="list">
          <ul id="people"></ul>
        </div>
      </div>
      <div class="right">
        <div class="title">...</div>
        <div class="content">
        </div>
        <div class="bottom">
          <textarea id="input" placeholder="请输入聊天内容..."></textarea>
          <div class="button">
            <button class="btn">发送</button>
          </div>
        </div>
      </div>
    </div>

    <script>
      let token = sessionStorage.getItem("token");
      // 自己得头像
      let selfavatar=null;
      // 聊天对象的id,头像
      let id = null,avatar=null

      if (token) {
        getUserInfo();

        var socket = io();
        // 发送消息
        $(".btn").click(() => {
          if ((id == null)) {
            alert("请先找一个聊天对象呢!");
          } else {
            let val = $("#input").val().trim(),
              data = {
                id,
                message: val,
              };
            socket.emit("message", data);
            $('.content').append(`<div class="self"><div class="selfbox">${val}</div><div class="selfarrow"></div><img class="img selfimg" src="${selfavatar}" alt=""/></div>`)
            $("#input").val('')
          }
        });
        // 获取全部人数
        socket.on("all", (data) => {
          $("#people").empty();
          $(".userlist").text(`在线用户列表(${data.length})`);
          data.forEach((item) => {
            $("#people").append(
              ` <li id='peo' data-id='${item.id}'> <img class='img' src='${item.avatar}'/> <span data-id='${item.id}'>${item.name}</span></li>`
            );
          });
        });
        // 获取消息
        socket.on("news", (data) => {
          console.log('消息来了',data);
          id=data.id;
          let html=`<div class="others"><img class="img" src="${data.avatar}" alt="" /> <div class="otherbox">${data.message}</div><div class="otherarrow"></div></div>`
          $('.content').append(html)
          $('.title').html(data.name)
        });
        socket.emit("token", token);
        // 登录过期
        socket.on("err", (data) => {
          console.log(data);
          if (data === 401) {
            alert("登录过期,请重新登录");
            location.href = "/";
          }
        });
      } else {
        location.href = "/";
      }
      // 点击某个用户
      $("#people").on("click", ["#peo",'img','span'], (e) => {
        $(".title").html(e.target.innerText);
        id=e.target.dataset.id;
        console.log(e)
        $('#peo').css('background-color','red;')
      });
      //获取用户详情
      function getUserInfo() {
        $.get("/userinfo", { token }, function (res) {
          console.log("用户详情", res);
          if (res.code == 200) {
            $("#name").append(res.data.nickname);
            $("#avatar").attr("src", res.data.avatar);
            selfavatar=res.data.avatar
          } 
        });
      }
      // 退出
      $(".loginout").click(function () {
        sessionStorage.removeItem("token");
        window.location.href = "/";
      });
    </script>
  </body>
</html>
